import React, {Fragment, useState} from 'react';

function A(props){
    const [name,setName]=useState('xm')
    console.log(props)
    return (
      <Fragment>
          <h2>A</h2>
          <span>我的下一行类似插槽想传啥传啥</span>
          {props.render(name)}
      </Fragment>
    )
}

function B(props){
    console.log(props,'>>>>>B')
    return(
        <Fragment>
            <h2>B</h2>
            <span>我是顶层A组件传给B组件的name:{props.name}</span>
        </Fragment>
    )
}

export default function RenderProps() {
    return (
        <Fragment>
            <h2>使用render设置插槽</h2>
            <span>A的render接收一个组件渲染到内部任意位置 A的状态可以作为入参绑定到B组件上进行传递 </span>
            <A render={(name)=><B name={name}/>}></A>
        </Fragment>

    );
};
